@charset 'UTF-8';
@import './common.scss';
@import '../fonts/iconfont.css';

.web{
	// button:hover{
	// 	background-color: #d576ba;
	// }
    scroll-behavior: smooth;
	main{
		perspective: 3px; 
		

		.bg{
			background-size: cover;
			// width: 100vw;
			width: 100%;
			height: 100%;
			z-index: -2;
			background-attachment: fixed;
			// background-image: url("../images/2.jpg");
			position: absolute;
		}	
		.top{
			
			position: relative;		
			.swiper{
				width: 77vw;
				height: 39vw;
				overflow: hidden;
				position: relative;
				z-index: 0;	
				--swiper-theme-color: red;
				.swiper-wrapper{
					.swiper-slide{
						width: 77vw;
						height: 39vw;
						overflow: hidden;
						img{
							width:100%;
						}
						
					}
				}
				.swiper-pagination{			
					bottom: 1.7vw;				
				}
				.swiper-button-prev{
					visibility: hidden;
				}
				.swiper-button-next{
					visibility: hidden;
				}
			}
			.conTop{
				position: absolute;
				z-index: 1;
				top: 15vw;
				left: 50%;
				transform: translateX(-50%);
				h2{
					font-size: 4vw;
					font-weight: normal;
					font-stretch: normal;
					letter-spacing: 0vw;
					color: white;
				}
				>a{
					display: block;
					font-size: 1vw;
					font-weight: normal;
					font-stretch: normal;
					letter-spacing: 0vw;
					color: white;
					text-align: center;
					border: 1px solid white;
					width: 10vw;
					margin: 0 auto;
					margin-top: 2vw;
					padding-top: 0.5vw;
					padding-bottom: 0.5vw;
					transition: background-color .5s;
				}
				a:hover{
					background-color: #d576ba;
					border-color: #d576ba;
				}
			}
		}
		
		.about{
			position: relative;
			
			padding-top: 5vw;

			text-align: center;
			.title{
	
				font-size: 3vw;
				font-weight: normal;
				font-stretch: normal;
				letter-spacing: 0vw;
				color: #000000;
			}
			.imgBox{
				width: 65vw;
				height: 31vw;
				overflow: hidden;
				padding-top: 3vw;
				margin: 0 auto;
				img{
					width: 100%;
				}
			}
			.btn{
				position: absolute;
				display: block;
				font-size: 1vw;
				font-weight: normal;
				font-stretch: normal;
				letter-spacing: 0vw;
				color: white;
				text-align: center;
				border: 1px solid white;
				width: 18vw;
				padding-top: 0.5vw;
				padding-bottom: 0.5vw;
				left: 50%;
				transform: translateX(-53%);
				top: 60%;
				transition: background-color .5s;
			}
			.btn:hover{
				background-color: #d576ba;
				border-color: #d576ba;
			}
		}
		
		.product{
			width: 65vw;
			margin: 0 auto;
			padding-top: 4vw;
			a:first-child{
				display: block;
				font-size: 3vw;
				font-weight: normal;
				font-stretch: normal;
				letter-spacing: 0vw;
				color: #000000;
				width: 15vw;
				margin: 0 auto;
			}
			.content{
				width: 65vw;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				padding-top: 3vw;
				padding-bottom: 2vw;
				.product1{
					.box{
						display: block;
						width: 43vw;
						height: 27vw;
						overflow: hidden;
						img{
							width: 100%;
						}
					}
					h3{
						font-size: 1vw;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0vw;
						color: #bfbfbf;
						text-align: center;
						padding-top: 1.5vw;
						padding-bottom: 0.6vw;
					}
					h4{
						font-size: 1vw;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0vw;
						color: #000000;
						text-align: center;
						padding-bottom: 1vw;
					}
					
				}
				
				.product2{
					.box{
						display: block;
						width: 20vw;
						height: 27vw;
						overflow: hidden;
						img{
							width: 100%;
						}
					}
					h3{
						font-size: 1vw;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0vw;
						color: #bfbfbf;
						text-align: center;
						padding-top: 1.5vw;
						padding-bottom: 0.6vw;
					}
					h4{
						font-size: 1vw;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0vw;
						color: #000000;
						text-align: center;
						padding-bottom: 1vw;
					}
					
				}
				
				.product3{
					padding-top: 2vw;
					.box{
						display: block;
						width: 21vw;
						height: 27vw;
						overflow: hidden;
						img{
							width: 100%;
						}
					}
					h3{
						font-size: 1vw;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0vw;
						color: #bfbfbf;
						text-align: center;
						padding-top: 1.5vw;
						padding-bottom: 0.6vw;
					}
					h4{
						font-size: 1vw;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0vw;
						color: #000000;
						text-align: center;
						padding-bottom: 1vw;
					}
					
				}
				
				.product4{
					padding-top: 2vw;
					.box{
						display: block;
						width: 42vw;
						height: 27vw;
						overflow: hidden;
						img{
							width: 100%;
						}
					}
					h3{
						font-size: 1vw;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0vw;
						color: #bfbfbf;
						text-align: center;
						padding-top: 1.5vw;
						padding-bottom: 0.6vw;
					}
					h4{
						font-size: 1vw;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0vw;
						color: #000000;
						text-align: center;
						padding-bottom: 1vw;
					}
				}
			}
			a:last-child{
				display: block;
				font-size: 1vw;
				font-weight: normal;
				font-stretch: normal;
				letter-spacing: 0vw;
				color: #000000;
				text-align: center;
				border: 1px solid #000000;
				width: 18vw;
				padding-top: 0.5vw;
				padding-bottom: 0.5vw;
				margin: 0 auto;
				transition: background-color .5s;
			}
			a:last-child:hover{
				background-color: #d576ba;
				border-color: #d576ba;
				color: #fff;
			}
			
		}
		
		
		.video{
			padding-bottom: 3vw;
			h3{
				text-align: center;
				font-size: 1vw;
				font-weight: normal;
				font-stretch: normal;
				letter-spacing: 0vw;
				color: #000000;
				padding-top: 4.5vw;
				padding-bottom: 1vw;
			}
			p{
				text-align: center;
				font-size: 1vw;
				font-weight: normal;
				font-stretch: normal;
				letter-spacing: 0vw;
				color: #000000;
			}
			
			.videoBox{
				position: relative;
				width: 53vw;
				margin: 0 auto;
				// padding-bottom: 3vw;
				padding-top: 3vw;
				padding-bottom: 3vw;
				height: 35vw;
				
				.videoContent{
					position: relative;
					width: 53vw;
					height: 100%;
					.videoMain{
						width: 100%;
						height: 100%;
						object-fit:fill;
						// padding-top: 3vw;
						// padding-bottom: 3vw;
						// width: 53vw;
						// height: 100%;
						
					}
					.videoMask{
						position: absolute;
						top: 0;
						// left: calc(50% - 23.4vw);
						width: 100%;
						height: 100%;
						
						background-color: rgba(0, 0, 0, .7);
						position: absolute;
						z-index: 1;
						i{
							position: absolute;
							// z-index: 999;
							color: whitesmoke;
							font-size: 8vw;
							top: calc(50% - 4vw);
							left: calc(50% - 4vw);
						}
					}
				}
				
				
			}
			a{
				display: block;
				font-size: 1vw;
				font-weight: normal;
				font-stretch: normal;
				letter-spacing: 0vw;
				color: #000000;
				text-align: center;
				border: 1px solid #000000;
				width: 18vw;
				padding-top: 0.5vw;
				padding-bottom: 0.5vw;
				margin: 0 auto;
				top: 60%;
				transition: background-color .5s;
			}
			a:hover{
				background-color: #d576ba;
				border-color: #d576ba;
				color: #fff;
			}
		}
		
		.bottom{
			position: relative;
			a{
				display: block;
				width: 100%;
				// height: 82.41vh;
				height: 52vw;
				overflow: hidden;
				img{
					width: 100%;
				}
				span{
					font-size: 3vw;
					font-weight: normal;
					font-stretch: normal;
					letter-spacing: 0vw;
					color: white;
					position: absolute;
					top: 21vw;
					right: 38vw;	
				}
			}
			
		}
	}
}

@media screen and (max-width:767px) {
	.web{
		main{
			padding-top: 0vw;
			
			
			.top{
				.swiper{
					width: 90vw;
					
				}
				.conTop{
					h2{
						font-size: 8vw;
					}
					a{
						width: 20vw;
						border: none;
						border-bottom: 1px solid white;
					}
				}
			}
			
			.about{
				display: none;
			}
			
			.product{
				a:first-child{
					padding-top: 4vw;
					transform: scale(1.5);
					padding-bottom: 2vw;
				}
				.content{
					display: block;
					.product1{
						.box{
							transform: scale(1.7);
							margin: 0 auto;
							padding-top: 9vw;
							padding-bottom: 12vw;
						}
					}
					.product2{
						.box{
							transform: scale(3);
							margin: 0 auto;
							padding-top: 16.2vw;
						}
						h3{
							padding-top: 45vw;
						}
						h4{
							
						}
					}
					.product3{
						display: none;
					}
					.product4{
						display: none;
					}
				}
				a:last-child{
					transform: scale(0.9);
					width: 40vw;
					padding: 1vw 0;
					margin-bottom: 5vw;
				}
			}
			
			.video{
				background-color: #f2f2f2;
				.videoBox{
					a{
						transform: scale(0.9);
						width: 40vw;
						padding: 1vw 0;
						margin-top: 3vw;
						margin-bottom: 3vw;
					}	
				}
			}
			.bottom{
				a{
					span{
						font-size: 6vw;
						right: 24vw;
					}
				}
				
			}
		}
	}
}

@media screen and (min-width:768px) and (max-width:1024px) {
	
}


